<template>
  <div>
    <div class="menu">
      <el-button type="primary" size="small" @click="openAddClassify">添加</el-button>
      <!-- 模糊查询 -->
      <div class="vagueFind">
        <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
          <!-- 根据显示状态进行查询 -->
          <el-form-item label="显示状态">
            <template>
              <el-select v-model="vagueFindForm.indexShow" placeholder="可选择状态" clearable>
                <el-option
                  v-for="item in indexShow"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <!-- 根据类型/文章进行查询 -->
          <el-form-item label="类型/文章">
            <template>
              <el-select v-model="vagueFindForm.classifyType" placeholder="可选查询项" clearable>
                <el-option
                  v-for="item in classifyType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <!-- 模糊查询名称-->
          <el-form-item label="类型/文章名称">
            <el-input v-model="vagueFindForm.classifyName" placeholder="请输入类型名称" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMemberList(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
    </div>
    <!-- 用户列表 -->
    <el-table :data="classifyList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="classifyId" label="类型/文章ID" width="180">
      </el-table-column>
      <el-table-column prop="classifyName" label="类型/文章名称" width="200">
      </el-table-column>
      <el-table-column prop="classifyImg" label="类型/文章图片" width="200">
        <template v-slot="scope">
          <img :src="scope.row.classifyImg" />
        </template>
      </el-table-column>
      <el-table-column prop="indexShow" label="是否显示" width="200">
        <template v-slot="scope">
          {{scope.row.indexShow==0?'未用':'显示'}}
        </template>
      </el-table-column>
      <el-table-column prop="classifyType" label="类型/文章" width="200">
        <template v-slot="scope">
          {{scope.row.classifyType==0?'类型':'文章'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditor(scope.row)">编辑</el-button>&nbsp;&nbsp;
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delManager(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="8" @current-change="getMemberList"
    	:total="classifyCount">
    </el-pagination>
    <AddClassify :addVisible="addVisible"></AddClassify>
    <EditorClassify :editorVisible="editorVisible" :editorObj="editorObj"></EditorClassify>
  </div>
</template>

<script>
  import AddClassify from "./component/AddClassify.vue"
  import EditorClassify from "./component/EditorClassify.vue"
  export default {
    name: "classify",
    components: {
    	AddClassify,
    	EditorClassify
    },
    data() {
      return {
        loadStatus: false,
        addVisible: false,
        editorVisible:false,
        classifyCount:0,
        classifyList:[],
        editorObj:{},
        // 模糊查询用实体
        vagueFindForm: {
          indexShow: null,
          classifyName:"",
          classifyType:"",
        },
        //
        indexShow:[{
          value:0,
          label: '未用'
        },{
          value:1,
          label: '显示'
        }],
        //
        classifyType:[{
          value:0,
          label: '类型'
        },{
          value:1,
          label: '文章'
        }],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      }
    },
    mounted() {
    	this.getMemberList(1)
    },
    methods: {
      //清楚模糊查询数据并返回查询页面
      clearvagueFindForm(){
        this.vagueFindForm={
            indexShow: null,
            classifyType:null,
            classifyName:"",
        }
        this.getMemberList(1)
      },
      openAddClassify() {
      	this.addVisible = true
      },
      openEditor(obj){
      	console.log(obj)
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(obj.classifyId){
          this.editorObj=obj
          this.editorVisible=true
        }else{
          this.$message({
            message: "获取数据错误",
            type: "error",
            duration: 1000,
          })
        }
      },
      getMemberList(page) {
      	var self = this;
      	self.loadStatus = true
      	// sessionStorage.setItem("classifyPage",page)
        sessionStorage.setItem("page",page)
      	var manager = JSON.parse(sessionStorage.getItem("manager"))
        //进行空值还原，防止数据类型错误
        if(this.vagueFindForm.indexShow===""){
          this.vagueFindForm.indexShow=null
        }
        if(this.vagueFindForm.classifyType===""){
          this.vagueFindForm.classifyType=null
        }
        //非法字符判断
      	if(this.vagueFindForm.classifyName.split(" ").length==1){
          self.$http.get("/api/CakeShop/DataManage/classifyFindAll", {
          	headers: {
          		token: manager.token
          	},
          	params: {
              start: page,
              pageSize: 8,
              // 因为是分类界面所以直接设默认值为1
              // classifyType:0,
              classifyName:this.vagueFindForm.classifyName,
              classifyType:this.vagueFindForm.classifyType,
              indexShow:this.vagueFindForm.indexShow,
          	}
          }).then(function(res) {
          	if (res.data.classifyInfo != null || res.data.classifyInfo != {}) {
          		self.classifyCount = res.data.pageCount
          		self.classifyList = res.data.classifyInfo
          		self.loadStatus = false
          	}
          }).catch(function(error) {
          	// console.log(error)
          	self.loadStatus = false
          })
        }else{
          self.$message({
          	duration: 1500,
          	message: "查询文本框中存在非法字符空格!",
          	type: "error",
          	onClose: function() {
              self.vagueFindForm.classifyName = ""
          		self.loadStatus = false
          	},
          });
        }
      },

      //删除数据
      delManager(param) {
      	var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(param.classifyImg==''){
          param.classifyImg==null
        }
        this.$http.delete("/api/CakeShop/DataManage/delClassify", {
          headers: {
            token: onlineManager.token
          },
          params: {
            classifyId:param.classifyId,
            classifyImg:param.classifyImg,
          }
        }).then((res) => {
          console.log(res)
          if(res.data.exist==0){
            if (res.data.delSuccNum>0) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.getMemberList(sessionStorage.getItem("page"))
                }
              })
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
                duration: 1000
              })
            }
          }else{
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }, function(err) {})
      }
    },
  }
</script>

<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-select{
    width: 120px;
  }
</style>
